#content{
 	width:100%; 
	height: 73%; min-height:420px;
}
/*
* @Section Canvas and Canvas navigation
*/
#wrap-canvas{
    position:relative;
    width:100%; height:100%;
}
#canvas{
	position:absolute;
	top:1000px; left:1000px;
	width:4000px; height:3000px;
	cursor:url(../images/depot/hand.gif), move;

}
#bigcanvas{
	position:absolute;
	top:-2000px;left:-2000px;
	width:6000px;height:5000px;
	z-index:0;
	
	
}
#tools{
	position: absolute;
	bottom:47%; right:15px;	
}
#minimap{
	position:relative;
	border:1px solid #000;
	height:150px; 
	width:200px; 
	background:#fff;
	z-index:5;
}
#dragger{
	height:12px;
	width:20px;
	top:45px;
	left:75px;
	border:1px solid gray;
	position:absolute;
	cursor: move;
}
/*
* @Section Depot
*/
#bt-send-work{
	display:block;
	padding:10px 10px 10px 35px ; margin: 5px 0px;
	border:1px solid #000;
	background:#fff url('../images/depot/sprite-icons.png') no-repeat 10px 50%;
	color: #000;
	cursor:pointer;
}
#bt-send-work:hover,
#bt-send-work:hover span{
	background:#000;
	color:#fff;
	text-decoration:none;
}
#bt-send-work span{
	background:#fff;
	display:block;
}
#canvas.crosshair{
	cursor:url('../images/depot/crosshair.gif'), crosshair;
}
.work{
	display:none;
	position:absolute;
	cursor:pointer !important;
}
.init{
	height: 16px; width: 16px;
	background:url('../images/depot/crosshair.gif') no-repeat;
}
.image{
    height: 20px; width: 20px;
}
.document{
    height: 20px; width: 20px;
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg)
}
.audio{  
    height: 20px; width: 20px;
    border-radius: 50%;
}
.video{
	width:0; height:0;
    border-style: solid;
    border-width:0px 11px 20px 11px;
	border-right-color:transparent;
	border-left-color:transparent;
    -moz-transform: rotate(90deg);
 	-webkit-transform: rotate(90deg);
	background:none;
}
.info{
	display:none;
	position:absolute; top: 0; left:20px;
	padding:2px;
	background: url('../images/depot/bg-box.png') no-repeat left center;
}
.info img{
	border:2px solid #686560;
	margin-left:8px; left: 25px;
	width:48px; height:48px;
	background:#fff;
}
.document .info{
	top: -56px; left: 12px;
	transform: rotate(-45deg) !important;
	-moz-transform: rotate(-45deg) !important;
 	-webkit-transform: rotate(-45deg) !important;
}
.video .info{
	left: -32px; top: -66px;
	transform: rotate(-90deg) !important;
	-moz-transform: rotate(-90deg) !important;
 	-webkit-transform: rotate(-90deg) !important;
}

/* z-index des oeuvres_draggable */
.oeuvres_draggable{
    z-index: 3;
}
/*
* @section Legende
*/
#legende{
	position:absolute;	bottom:0;
	width:100%;
	padding:10px 0;
	border-top: 1px solid #000;
	background:#fff;
	text-align:center;
        background-color: #FFFFFF;
}
#legende ul{
	margin:0 auto;
	overflow:hidden;
}
#legende li{
	display:inline-block;
	margin-left:5%;
	padding-left:21px;
	font-style:italic;
	background: url('../images/depot/sprite-icons.png') no-repeat;
}
#legende li:first-child{
	margin-left:0;
	font-weight:bold;
	background:none;
}
#legende li.lg-video{
	background-position:-73px 0;
}
#legende li.lg-audio{
	background-position:-95px 0;
}
#legende li.lg-doc{
	background-position:-48px 0;
}
#legende li.lg-pic{
	background-position:-25px 0;
}
#legende span{
	display:block;
	padding-left:14px;
	background:#fff;	
}
/*
* @Section	Popup
*/
#category{
	width:380px;
}
#category li{	
    float: left; 
    height: 64px; width: 104px;
    margin: 2%;
	border-radius: 13px;
	border-width:2px;
	border-style:solid;
	background:none;
    text-align: center;
	line-height:64px;
}
#category li.absurde:hover,
#category li.absurde.selected{
	background-color:#E62F72;
}
#category li.emotion:hover,
#category li.emotion.selected{
	background-color:#35A42C;
}
#category li.memoire:hover,
#category li.memoire.selected{
	background-color:#124B9A;
}
#category li.partage:hover,
#category li.partage.selected{
	background-color:#EA6F11;
	border-color:#EA6F11;
}
#category li.parole:hover,
#category li.parole.selected{
	background-color:#EAE004;
}
#category li.penser:hover,
#category li.penser.selected{
	background-color:#1E8BC6;
}
#category li.reel:hover,
#category li.reel.selected{
	background-color:#E3001B;
}
#category li.travail:hover,
#category li.travail.selected{
	background-color:#87888A;
}
#category li.valeur:hover,
#category li.valeur.selected{
	background-color:#94408E;
}
#category a{
	display:block;
	color:#000;
}
#category li:hover a,
#category a:hover{
	color:#fff;
	text-decoration:none;
}

label{
	display:block;
	margin:10px 0;
	font-weight:bold;
	font-size:0.9em;
}
input[type="file"]{
	width:84%;
	padding:7px; margin-right:1.5%;
	border:3px solid #fff;
	background:#E8E8E8;
	color:#A3A3A3;
	font-size:1.2em;
	text-align:center;
}
.action{
	float:right; clear:both;
	margin:25px 0 0;
}
.button,
.action input[type="submit"],
.action input[type="button"]{
	padding:13px 25px; margin:5px; 
	border:1px solid #000;
	background:#fff;
	cursor:pointer;
}
.button:hover,
.action input[type="submit"]:hover,
.action input[type="button"]:hover{
	background:#000;
	color:#fff;
}

hr{
	margin:15px auto;
	width:45%;
}


#popup{
    border: solid 1px #000000;
    display: none;
    position: absolute;
    top: 5%;
    left: 35%;
    background-color: #FFFFFF;
    z-index: 99999;
}

